<template>
  <view class="">
    <cu-layout one-page show-switch navbar="search" title="分类" tabbar="/pages/cate/index">
      <view class="h-full hair-t flex">
        <scroll-view class="aside h-full flex-shrink" :scroll-y="true" :scroll-with-animation="true">
          <view v-for="(item,i) in state.cateList" :key="i" class="aside-item" :class="i === state.asideActive ? 'aside-active' : ''" @click="onLeftClick(i)">
            <text>{{ item.name }}</text>
          </view>
        </scroll-view>
        <scroll-view class="h-full flex-1 bg-white px-5 overflow-y-auto" :scroll-y="true" :scroll-into-view="state.intoView" :scroll-with-animation="true" @scroll="onRightScroll">
          <view class="py-4">
            <view v-for="(item,i) in state.cateList" :id="`into${i}`" :key="i" class="into-item pb-12">
              <view class="cate-title flex-a" @click="$.router.go('/pages/goods/list', {cateId: item.id})">
                <view class="font-600 px-10">{{ item.name }}</view>
                <view class="iconfont icon-xiangyou1 text-14 text-content" />
              </view>
              <view class="flex-w">
                <view v-for="(val, k) in item.children" :key="k" :span="4" class="cate-item flex-vca" @click="$.router.go('/pages/goods/list', {cateId: val.id})">
                  <image v-if="val.logo" class="cate-logo" :src="val.logo" mode="w" />
                  <image v-else class="cate-logo" src="@/static/img/def-cate.png" mode="" />
                  <view class="leading-32 ellipsis-1">{{ val.name }}</view>
                </view>
              </view>
            </view>
            <view class="" :style="{height: state.placeholderH + 'px'}" />
          </view>
        </scroll-view>
      </view>
    </cu-layout>
  </view>
</template>

<script setup>
import { reactive, computed, nextTick, getCurrentInstance } from 'vue'
import { onLoad } from '@dcloudio/uni-app'
import $ from '@/sheep'

const state = reactive({
  cateList: [],
  intoTops: [],
  asideActive: 0,
  intoView: '',
  placeholderH: 0,
  intoLock: false
})
const pageH = computed(() => $.store('app').pageH)
const instance = getCurrentInstance()
onLoad(async() => {
  const cateList = await $.utils.getList('store/category')
  state.cateList = $.utils.toTree(cateList)
  await nextTick()
  const intoTops = []
  uni.createSelectorQuery().in(instance).selectAll('.into-item').boundingClientRect(els => {
    els.forEach((el, i) => {
      intoTops.push(el.top)
      if (i === state.cateList.length - 1) {
        state.placeholderH = pageH.value - el.height
      }
    })
  }).exec()
  state.intoTops = intoTops
})

function onLeftClick(i) {
  state.asideActive = i
  state.intoView = `into${i}`
  state.intoLock = true
}

function onRightScroll(e) {
  if (state.lock) {
    state.intoLock = false
    return
  }
  let scrollTop = e.detail.scrollTop
  for (let i = 0; i < state.intoTops.length; i++) {
    if (scrollTop >= 0 && scrollTop < state.intoTops[1] - state.intoTops[0]) {
      state.asideActive = 0
    } else if (scrollTop >= state.intoTops[i] - state.intoTops[0] && scrollTop < state.intoTops[i + 1] - state.intoTops[
      0]) {
      state.asideActive = i
    } else if (scrollTop >= state.intoTops[state.intoTops.length - 1] - state.intoTops[0]) {
      state.asideActive = state.intoTops.length - 1
    }
  }
}
</script>
<style lang="scss">
.aside {
	width: 190rpx;
	.aside-item {
		height: 96rpx;
		line-height: 96rpx;
		text-align: center;
	}
	.aside-active {
		background-color: #fff;
	}
}
.cate-title {
	height: 88rpx;
}
.cate-item {
	width: 180rpx;
	padding: 0 4rpx;
	box-sizing: border-box;
	margin-top: 24rpx;
}
.cate-logo {
	display: block;
	width: 120rpx;
	height: 120rpx;
	border-radius: 50%;
	overflow: hidden;
}
</style>
